<!--
* @description 
* @fileName list.vue
* @author huangyu
* @date 2023/03/04 16:28:53
!-->
<template>
    <div class="app-container">
        <van-sticky>
            <van-search v-model="goodsName" placeholder="请输入物品名称" @search="changeData" @cancel="changeData" />
            <div>
                <van-dropdown-menu>
                    <van-dropdown-item v-model="onSale" :options="saleList" @change="changeData" />
                    <van-dropdown-item v-model="classStr" :options="classItemList" @change="changeData" />
                </van-dropdown-menu>
            </div>
        </van-sticky>
        <van-grid :column-num="4" style="margin-bottom:10px;">
            <van-grid-item v-for="(item,index) in list" @click="showPopup(item)" :key="index" :style="{opacity:item.onSale?'1':'0.5'}">
                <van-badge :content="item.strong?`+${item.strong}`:''">
                    <div style="height:36px;position: relative;cursor:pointer;text-align: center;">
                        <img :src="`https://7765-web-cloud0713-6g519i65f479e638-1301064135.tcb.qcloud.la/GamePublic/${item.icon}`" alt="">
                        <div class="zx-icon-bg" style="left:50%;margin-left:-18px;"></div>
                    </div>
                    <div style="font-size:12px;text-align: center;">
                        <div style="margin:5px 0;">{{ item.name.slice(0,5) }}</div>
                        <div>
                            <strong class="color_danger">{{item.money}}</strong>
                            <span style="color:#999;">
                                {{item.priceType=='1'?'金':item.priceType=='2'?'符':''}}*{{item.number}}
                            </span>
                        </div>
                    </div>
                </van-badge>
            </van-grid-item>
        </van-grid>
        <van-pagination v-model="pageindex" :total-items="total" :items-per-page="pagesize" @change="changePage" />

        <van-popup v-model="showDetail" round position="bottom" :style="{ height: '40%' }">
            <vGoodsDetail :model="detailModel"></vGoodsDetail>
        </van-popup>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import vGoodsDetail from "@/components/app/zhuxian/goodsDetail.vue"
export default {
    components: {vGoodsDetail},
    data() {
        return {
            token: this.$store.state.token,
            list: [],
            pageindex: 1,
            pagesize: 20,
            total: 0,

            goodsName: "",
            onSale: true,
            classStr: "",
            showDetail: false,
            detailModel: {},
            saleList:[
                {text:"上/下架全部",value:null,},
                { text: '上架', value: true },
                { text: '下架', value: false },
            ],
            classItemList: [
                {text:"全部职业",value:"",},
                {text: "鬼王宗",value: "1",},
                {text: "合欢派",value: "2",},
                {text: "青云门",value: "3",},
                {text: "天音寺",value: "4",},
                {text: "鬼道",value: "5",},
            ]
        }
    },
    mounted() {
        if(this.token){
            this.getData()
        }
    },
    methods: {
        getData(){
            let params = {
                type: 'getBooth',
                api: 'api-booth-list-my',
                token: this.token,
                data: {
                    goodsName: this.goodsName,
                    onSale: this.onSale,
                    classStr: this.classStr,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game', params).then(res => {
                if (res) {
                    // console.log(res)
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        changePage(value){
            this.pageIndex = value
            this.getData()
        },
        changeData(){
            this.pageindex = 1
            this.getData()
        },
        showPopup(row){
            this.showDetail = true
            this.detailModel = row
        },
    },
}
</script>

<style scoped></style>